<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Client</title>
</head>
<body>
    <h1>WebSocket Test</h1>
    <button id="connect">Connect to WebSocket</button>
    <script>
        document.getElementById('connect').addEventListener('click', function() {
            var socket = new WebSocket('ws://127.0.0.1:8000');
            
            socket.onopen = function() {
                console.log("Connected to WebSocket server");
                socket.send('Hello Server!');
            };

            socket.onmessage = function(event) {
                console.log("Message from server: ", event.data);
            };

            socket.onclose = function() {
                console.log("Connection closed");
            };
        });
    </script>
</body>
</html> -->


<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Client</title>
</head>
<body>
    <h1>WebSocket Test</h1>
	<input placeholder="请输入你的消息" id="inp" />
    <button id="connect">Connect to WebSocket</button>
    <script>
		
        document.getElementById('connect').addEventListener('click', function() {
			
			let inputValue  = document.getElementById("inp").value;
			
            var socket = new WebSocket('ws://127.0.0.1:9501');
            
            socket.onopen = function() {
                console.log("Connected to WebSocket server");
                socket.send(inputValue);
            };

            socket.onmessage = function(event) {
                console.log("Message from server: ", event.data);
            };

            socket.onclose = function() {
                console.log("Connection closed");
            };
        });
    </script>
</body>
</html> -->



<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>WebSocket Group Chat</title>
		<style>
			#messages {
				height: 300px;
				overflow-y: scroll;
				border: 1px solid #ccc;
				padding: 10px;
			}

			#input {
				width: 80%;
			}
		</style>
	</head>
	<body>
		<h1>WebSocket Group Chat</h1>
		<div id="messages"></div>
		<input id="input" placeholder="请输入您的信息" />
		<button onclick="sendMessage()">发送</button>

		<script>
			const ws = new WebSocket('wss://limsapi.gzhbcss.com/ws');
			// const ws = new WebSocket('ws://10.10.1.206:9501/ws');
			// const ws = new WebSocket('ws://127.0.0.1:9501/ws');
			const messagesDiv = document.getElementById('messages');
			const inputField = document.getElementById('input');

			// 获取 0 到 100 之间的随机整数
			// let randomNumber = Math.floor(Math.random() * 101);  // Math.floor() 确保随机数是整数

			// // 将随机数保存到本地存储
			// localStorage.setItem('randomNumber', randomNumber);

			// // 从本地存储中获取保存的随机数
			// const savedRandomNumber = localStorage.getItem('randomNumber');

			// 监听服务器消息
			ws.onmessage = function(event) {
				console.log("服务器返回的信息", event)
				const message = event.data;
				const newMessage = document.createElement('p');
				newMessage.textContent = message;
				messagesDiv.appendChild(newMessage);
				messagesDiv.scrollTop = messagesDiv.scrollHeight; // 滚动到最新消息
			};

			// 发送消息
			function sendMessage() {
				// const message = savedRandomNumber+"：" + inputField.value;
				const message = inputField.value;
				if (message) {
					ws.send(message); // 发送到服务器
					inputField.value = ''; // 清空输入框
				}
			}

			// 监听键盘按下事件
			inputField.addEventListener('keydown', function(event) {
				// 检查是否按下了回车键
				if (event.key === 'Enter') {
					if (input.value) {
						ws.send(input.value); // 发送到服务器
						inputField.value = ''; // 清空输入框
					}
				}
			});
		</script>
	</body>
</html>